<template>
  <div class="PartyMemberManagement">
    <div class="search">
      <img src="@as/img/sousuo.png" alt="">
<form action="javascript:;" @submit="submit">
      <input v-model="value" type="search" placeholder="搜索组织/姓名">
</form>
    </div>
      <div v-if="list.length>0">
          <div class="father" >
              <img src="@as/img/jituandangwei.png" alt="">
              <span class="name">{{self.name}}</span>
              <span class="people" @click="goMember(self.id)">共{{self.self_count}}人</span>
          </div>
          <ul class="children">
              <li v-for="(item,index) in list" :key="index">
                  <img class="select" src="@as/img/select_r.png" alt="">
                  <span class="name" @click="getOrgList(item.id)">{{item.name}}</span>
                  <span class="people" @click="goMember(item.id)">{{item.count}}人</span>
              </li>
          </ul>
      </div>
    <div class="emptyText" v-else>
          <img src="../../../../assets/img/quesheng_zanwuneirong@2x.png" alt="">
      </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        value:"",
        self:{},
        list:[]
      }
    },
      mounted(){
        this.$progress.done();
      },
    created() {
      this.getOrgList(this.$route.query.id||JSON.parse(Cookies.get('user_71ydj')).organization_id)
    },
    methods: {
      submit(){
        this.$router.push({path: '/mine/PartyMemberManagement/search', query: {value:this.value}})
      },
      goMember(id){
        this.$router.push({path: '/mine/memberList', query: {id:id}})
      },
      
      getOrgList(id){
        const url = `app/Party/index`
        let params = {
          org_ID: id
        }
        this.$http.get(url, params).then(res=>{
          if(res.data.list.length){
            this.self = res.data.self;
            this.list = res.data.list
          }else{
            this.$toast.error('该组织暂无下级!');
          }
        })
      }
    },
    components: {

    }
  }
</script>

<style lang="scss" scoped>
input[type="search"]::-webkit-search-cancel-button{
    display: none;
}
.PartyMemberManagement{
    min-height: 100vh;
    .emptyText{
        width: 100%;
        height: 80vh;
        display: block;
        position: relative;
        img{
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

    }
}
.search{
  position: relative;
  box-sizing: border-box;
  display: block;
  width:343px;
  height:40px;
  margin: 25px auto 20px;
  img{
    width:14px;
    height:14px;
    position: absolute;
    left: 10px;
    top: 13px;
  }
  input{ 
    -webkit-appearance: none;
    box-sizing: border-box;
    line-height: 23px;
    padding: 0 32px;
    display: block;
    width:343px;
    height:40px;
    border: 0;
    outline: none;
    background:rgba(221,221,221,.3);
    border-radius:6px;
    font-size:13px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(204,204,204,1);
  }
}
.father{
  width: 100%;
  display: flex;
  height: 32px;
  line-height: 32px;
  padding:0 18px 0 16px;
  span.name{
    flex: 1;
    display: block;
    width: 230px;
    font-size:18px;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  img{
    width:32px;
    height:32px;
    margin-right: 7px;
  }
  span.people{
    font-size:12px;
    line-height: 32px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
}
.children{
  box-sizing: border-box;
  padding-left: 16px;
  li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 52px;
    line-height: 52px;
    border-bottom: 1PX solid rgba(221,221,221,.5);
    padding-left: 26px;
    padding-right: 16px;
    &:last-of-type{
      border:0
    }
    span.name{
      display: inline-block;
      width: 230px;
      font-size:15px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .select{
      width:6px;
      height:10px;
      margin-right: 8px;
    }
    span.people{
      width:66px;
      height:21px;
      line-height: 21px;
      border:1px solid rgba(244,117,72,1);
      border-radius:10px;
      text-align: center;
      font-size:12px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(244,117,72,1);
    }
  }
}
</style>
